<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css"
			href="../../../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
	</head>
	<style type="text/css">
		body {
			background: #f8f8f8;
		}

		.row {
			width: 100%;

			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0;
			margin-bottom: 20px;
			position: relative;
		}

		.row1 {

			height: 300px;


		}

		.row2 {
			height: 300px;
		}

		#left {
			position: absolute;
			width: 45%;
			left: 0;
			background: #ecf0f1;
			border-radius: 10px;
			box-shadow: #969696;
			border: #bdc3c7 solid 3px;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		#right {
			position: absolute;
			width: 45%;
			right: 0;
			border-radius: 10px;
			background: #ecf0f1;
			border: #bdc3c7 solid 3px;
			box-shadow: #969696;
			height: 100%;
		}

		.img {
			width: 100%;
			height: 100%;
			border: #f1c40f 6px solid;
			border-radius: 15px;
			object-fit: cover;
		}
	</style>
	<body>
		<div class="ms-content-wrapper">
			<div class="container-fluid">
				{% with item=data,num=num %}

				<div class="row row1">
					<img src={{item.pic}} class="img-responsive img" alt="Responsive image" style="height: 95%; ">

				</div>
				<div class="row row2">
					<div id="left" class="col-md-5">
						<div id="">
							<h3>{{item.DNAME}}</h3>
						</div>

						<table class="table ms-profile-information">
							<tbody>
								<tr>
									<th scope="row">编号</th>
									<td>{{item.DNO}}</td>
								</tr>
								<tr>
									<th scope="row">分类</th>
									<td>{{item.CATEGORY}}</td>
								</tr>
								<tr>
									<th scope="row">成本</th>
									<td>￥{{item.cost}}</td>
								</tr>
								<tr>
									<th scope="row">价格</th>
									<td>￥{{item.price}}</td>
								</tr>


								<tr>
									<th scope="row">销售数量</th>
									<td>{{num}}</td>
								</tr>

							</tbody>
						</table>
						<div class="r1" style="width: 100%; ">

							<button id="edit" onclick="getattr({{item}})" type="button" class="btn btn-primary"
								style="position: absolute; left: 15px;width: 30%;bottom: 2px;">编辑</button>
							<button id="delete" onclick="delete_item({{item.DNO}})" type="button" class="btn btn-danger"
								style="position: absolute; right: 15px; width: 30%; bottom: 2px;">删除</button>

						</div>

					</div>
					<div id="right" class="col-md-5">
						<h2>详细信息</h2>
						<p style="">{{item.intro}}</p>
					</div>

					{% endwith %}
					<div class="modal fade" id="createFileMModal" role="dialog" aria-labelledby="exampleModalLabel"
						aria-hidden="true">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="createFileTitle" style="width: auto;">创建文件</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<form>

										<div class="form-group">
											<div class="col-md-5">
												<label for="fileName" class="col-form-label">菜名</label>
												<input type="text" autofocus class="form-control" id="name">
											</div>
											<div class="col-md-5 col-md-offset-2" ">
												<label for=" exampleInputEmail1">分类</label>
												<select name="dish" class="form-control" id="category" style="padding: 0;">
													<option value="荤菜">荤菜</option>
													<option value="素菜">素菜</option>
													<option value="主食">主食</option>
													<option value="饮品">饮品</option>
													<option value="甜品">甜品</option>
													<option value="汤类">汤类</option>
													<option value="凉菜">凉菜</option>
												</select>
											</div>
										</div>
										
										
										
										<div class="form-group">
											<div class="col-md-5">
												<label for="fileName" class="col-form-label">成本</label>
												<input type="text" autofocus class="form-control" id="cost">
											</div>
											<div class="col-md-5 col-md-offset-2">
												<label for="fileName" class="col-form-label">价格</label>
												<input type="text" autofocus class="form-control" id="price">
											</div>

										</div>
										
										<div class="form-group">
											<div class="col-md-12">
												<label for="exampleInputEmail1">详细信息</label>
												<div class="input-group" style="width: 100%;">
													<textarea rows="5" id="info" class="form-control"
														placeholder="菜品信息" style="margin-bottom:20px;"></textarea>
												</div>
											</div>
										</div>

									</form>
								</div>
								<div class="modal-footer " style="border:0;right:15px;">
									<button type="button" class="btn btn-primary" id="createFileSureBut"
										onclick="submit()">确定</button>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
			<script src="../../../static/js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../../static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript"
				charset="utf-8"></script>

			<script type="text/javascript">
			
			
				var id=1
				
				
				function ShowCreateModal(title) {
					$("#createFileTitle").text(title);
					$('#createFileMModal').modal('show');
				}

				function alterData() {
					var name = $("#name").val();
					console.log(id)
					var price = $("#price").val();
					var cost = $("#cost").val();
					var info=$('#info').val();
					var category = $("#category").val();
					location.href='/dish_edit?id='+id+'&name='+name +  '&cost=' + cost + '&price=' + price+'&category=' + category+'&info='+info


					
				}

				function submit() {
					alterData()
					$("#createFileMModal").modal("hide")
					//alert('更改成功！')
				}



				function getattr(item) {
					//console.log('你好')
					//console.log('xxxx')
					console.log(item)
					id = item.DNO
					var name = item.DNAME
					var price = item.price
					var cost = item.cost
					var category =item.CATEGORY
					var info = item.intro


					$('#name').val(name)
					// $('#age').val(age)
					$('#price').val(price)
					$('#cost').val(cost)
					$('#info').val(info)
					$('#category').val(category)
					ShowCreateModal('修改菜品信息')
					//console.log(id, name, age, sex, phone)
				}
				
				function delete_item(id){
					alert('确定删除吗？')
					location.href='/dish_delete?id='+id
					alert('删除成功！')
				}
			</script>
	</body>
</html>
